<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="upload_excel">
    <div class="_upload-excel">
        <div class="_pop-container">
            <div class="_top">
                上传工资表
            </div>
            <div class="_content">
                <div>
                    <select v-model="year">
                        <option v-for="i in yearList" v-html="i"></option>
                    </select>年
                    <select v-model="month">
                        <option v-for="i in monthList" v-html="i"></option>
                    </select>月
                </div>
                <div class="_upload-tip">
                    上传Excel文件
                </div>
                <div class="_upload-frame">
                    <input type="file" @change="changeFile($event)">
                    <div class="_upload-input">
                        <div class="_upload-filename" v-html="filename"></div>
                    </div>
                    <div class="_upload-btn">
                        浏览
                    </div>
                </div>
                <div class="_submit-container">
                    <div class="_submit _btn" @click="submit()" v-html="submitText">下一步</div>
                    <div class="_cancel _btn" @click="close()">取消</div>
                </div>
            </div>
            <img class="_close" src="/images/components/add_member/ic-close.png" alt="" @click="close()">
        </div>
    </div>
</script>
<script>
    var uploadExcel = {
        template: "#upload_excel",
        props: [],
        data: function() {
            return {
                filename: "",
                monthList: [],
                yearList: [],
                year: "",
                month: "",
                input: undefined,
                submitText: "上传",
            }
        },
        computed: {
            date: function() {
                return this.year + "" + (this.month > 9 && this.month || "0" + this.month);
            },
            forMateDate: function() {
                if (this.year == new Date().getFullYear() && this.month > new Date().getMonth()) {
                    return false;
                }
                return true;
            }
        },
        methods: {
            changeFile: function(event) {
                this.input = undefined;
                this.filename = "";
                var input = event.target;
                var file = input.files[0];
                if (!file) {
                    this.filename = "";
                    this.input = "";
                    return;
                }
                var filename = file.name;
                var size = file.size;
                if (size > 20000000) {
                    this.$dispatch("danger", "文件过大，请重新选择");
                    return;
                }
                if (!/\.xls$/.test(filename)) {
                    this.$dispatch("danger", "文件类型有误，重新上传");
                    return;
                }
                this.filename = filename;
                this.input = input;
            },
            close: function() {
                this.$dispatch("closeUploadExcel");
            },
            submit: function() {
                if (!this.forMateDate) {
                    this.$dispatch("danger", "时间请勿超过当前月份");
                    return;
                }
                var _this = this;
                if (this.input) {
                    this.submitText = "上传中...";
                    fileUpLoadMulti([this.input], function (res) {
                        if (res.errcode == 0) {
                            var url = res.result[0];
                            $.ajax({
                                type: 'POST',
                                url: location.href,
                                data: {
                                    act: "salaryExcelInit",
                                    hospital: HOSPITAL,
                                    urlFileName: url,
                                },
                                success: function(res) {
                                    _this.submitText = "上传";
                                    res = JSON.parse(res);
                                    if (res.errcode == 0) {
                                        _this.$dispatch("uploadExcelSuccess", {
                                            date: _this.date,
                                            url: url,
                                            list: res.data,
                                        });
                                    } else {
                                        _this.$dispatch("danger", res.errmsg);
                                    }
                                },
                            });
                        } else {
                            _this.$dispatch("danger", res.errmsg);
                        }
                    });
                } else {
                    _this.$dispatch("danger", "请上传需要导入的工资表!");
                }
            }
        },
        events: {

        },
        ready: function() {
            this.monthList = Array.apply("", Array(12)).map(function(item, index) {return index + 1});
            var nowYear = new Date().getFullYear();
            var yearLength = nowYear - 2016 + 1;
            this.yearList = Array.apply("", Array(yearLength)).map(function(item, index) {return 2016 + index});
            var month = new Date().getMonth();
            if (month == 0) {
                this.year = nowYear - 1;
                this.month = "12";
            } else {
                this.year = nowYear;
                this.month = month;
            }
        },
        components: {

        }
    }
</script>
<style>
    ._upload-excel {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 10;
        font-size: 18px;
    }
    ._upload-excel ._pop-container {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        width: 500px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    ._upload-excel ._top {
        background: #e6eaf5;
        color: #333;
        line-height: 80px;
        font-size: 20px;
        text-align: center;
    }
    ._upload-excel ._content {
        padding: 40px;
        background: #fff;
    }
    ._upload-excel ._btn {
        display: inline-block;
        border-radius: 4px;
        padding: 8px 20px;
        box-sizing: border-box;
    }
    ._upload-excel ._submit {
        margin-right: 12px;
        color: #fff;
        background-color: #3f8dfa;
    }
    ._upload-excel ._cancel {
        color: #333;
        background: #fff;
        border: 1px solid #ccc;
    }
    ._upload-excel ._upload-frame {
        position: relative;
        font-size: 0;
    }
    ._upload-excel ._upload-frame input {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 0;
        opacity: 0;
    }
    ._upload-excel ._upload-input {
        display: inline-block;
        width: 300px;
        font-size: 18px;
        border: 1px solid #ccc;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        vertical-align: middle;
        overflow: hidden;
    }
    ._upload-excel ._upload-btn {
        display: inline-block;
        background: #ddd;
        text-align: center;
        line-height: 40px;
        width: 120px;
        color: #666;
        font-size: 18px;
        vertical-align: middle;
    }
    ._upload-excel ._close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: -15px;
        top: -15px;
        cursor: pointer;
    }
    ._upload-excel ._submit-container {
        margin-top: 30px;
        text-align: center;
    }
    ._upload-excel ._upload-tip {
        line-height: 30px;
        color: #333;
        font-size: 18px;
    }
    ._upload-excel ._upload-filename {
        margin-left: 12px;
        color: #999;
    }
    ._upload-excel select {
        margin-right: 12px;
        width: 100px;
        height: 30px;
        font-size: 18px;
        vertical-align: middle;
    }
</style>
